<template>
	<view>
		<view class="layout" :style="`paddingTop: ${statusHeight}`">
			<view class="header">
				<view class="header-avater">
					<view class="u-avater" @click="goLogin">
						<u-avatar :src="src" size="120rpx"></u-avatar>
						<view class="u-avater-text">
							<view class="nickname">{{userInfo.nickname}}</view>
							<image src="../../static/table/icon_information_selected.png" mode=""></image>
						</view>
					</view>
					<view class="more" data-path="/pages/mine/userInfo" @click="jumpInfo">个人信息 <u-icon name="arrow-right" color="#666666" size="28"></u-icon></view>
				</view>
				<view class="header-adv" data-path="/pages/mine/vip" @click="jumpInfo">
					<image src="../../static/images/join_vip_bg.png" mode=""></image>
					<text>立即加入</text>
				</view>
			</view>
			<view class="mine-info">
				<view class="mine-info-money">
					<view class="mine-money">
						<view>余额</view>
						<view class="money">{{isLogin?userInfo.unsettledCommission:'--'}}</view>
					</view>
					<view class="lineL"></view>
					<view class="mine-money">
						<view>积分</view>
						<view class="money">{{isLogin?userInfo.score: '--'}}</view>
					</view>
				</view>
				<view class="mine-nav">
					<nav-bar :width="navWidth" :imgW="navImgW" :imgH="navImgH" :fontColor="fontColor" :list="navList" />
				</view>
			</view>
		</view>
		<view class="footer">
			<u-cell-group :border="false">
				<u-cell v-for="(item,index) in list" :key="index" 
				:border="item.bottomB"
				:titleStyle="item.titleStyle"
				:icon="item.icon" 
				:title="item.title" 
				:iconStyle="item.iconStyle" 
				:isLink="item.isLink" 
				:url="item.url"></u-cell>
			</u-cell-group>
		</view>
		<view class="footer">
			<view class="logout">确认退出</view>
		</view>
		<modal v-if="modalInfo.isPopupDialog" :modalInfo="modalInfo"  :onResult="onModalResult"></modal>
	</view>
</template>

<script>
	import navBar from '../index/component/navBar.vue'
	import { hasLogin } from '../../utils/util.js'
	import router from '../../utils/router.js'
	import { userApi } from '../../api/userinfo'
	import storage from '../../utils/storage.js'
	import modal from '../../components/modal/modal.vue'
	export default {
		components: {
			navBar
		},
		data () {
			return {
				userInfo: {},
				isLogin: false,
				tabbarPath: ['/pages/mine/mine', '/pages/index/index', '/pages/coupon/index', '/pages/info/info', '/pages/invite/invite','/pages/card/card'],
				statusHeight: getApp().globalData.statusBarHeight,
				src: '../../static/images/bgCar01.png',
				navWidth: '25%',
				//  组件nav image 大小
				navImgW: '52',
				navImgH: '52',
				//组件nav 字体颜色
				fontColor: '#333',
				navList: [
					{
						name: '我的钱包',
						img: '../../static/table/Group.png',
						url: '/pages/mine/wallet'
					},
					{
						name: '我的团队',
						img: '../../static/table/Group.png',
						url: '/pages/estimate/estimate'
					},
					{
						name: '评估报告',
						img: '../../static/table/Group.png',
						url: '/pages/estimate/estimate'
					},
					{
						name: '我要发布',
						img: '../../static/table/Group.png',
						url: ''
					},
				],
				list: [
					{
						icon: '',
						title: '我的邀请人',
						url: '',
						isLink: true,
						bottomB: true,
						iconStyle: {
							width: '42rpx',
							height: '42rpx'
						},
						titleStyle: {
							fontSize: '28rpx',
							paddingLeft: '10rpx'
						}
					},
					{
						icon: '',
						title: '邀请码',
						url: '',
						isLink: true,
						bottomB: true,
						iconStyle: {
							width: '42rpx',
							height: '42rpx'
						},
						titleStyle: {
							fontSize: '28rpx',
							paddingLeft: '10rpx'
						}
					},
					
					{
						icon: '',
						title: '考试入口',
						url: '',
						isLink: true,
						bottomB: true,
						iconStyle: {
							width: '42rpx',
							height: '42rpx'
						},
						titleStyle: {
							fontSize: '28rpx',
							paddingLeft: '10rpx'
						}
					},
					{
						icon: '',
						title: '征信查询',
						url: '',
						isLink: true,
						bottomB: true,
						iconStyle: {
							width: '42rpx',
							height: '42rpx'
						},
						titleStyle: {
							fontSize: '28rpx',
							paddingLeft: '10rpx'
						}
					},
					{
						icon: '',
						title: '利息计算器',
						url: '',
						isLink: true,
						bottomB: true,
						iconStyle: {
							width: '42rpx',
							height: '42rpx'
						},
						titleStyle: {
							fontSize: '28rpx',
							paddingLeft: '10rpx'
						}
					},
					{
						icon: '',
						title: '积分商城',
						url: '',
						isLink: true,
						bottomB: false,
						iconStyle: {
							width: '42rpx',
							height: '42rpx'
						},
						titleStyle: {
							fontSize: '28rpx',
							paddingLeft: '10rpx'
						}
					}
				],
				tipImg: '../../static/images/tip_img.png',
				modalInfo: {
					isPopupDialog: false,
					tipContent: "",
					tipTitle: "",
					imgSrc: "",
					btnTitle: "",
				}
			}
		},
		onLoad() {
			console.log(storage.get('userInfo'),'fddfg',hasLogin())
			if(hasLogin()){
				this.userInfo = storage.get('userInfo')
				this.getUser();
			}
		},
		onShow() {
			this.onRefreshPage()
		},
		methods: {
			
			// 刷新页面
			onRefreshPage() {
				this.isLogin = hasLogin()
				// 获取页面数据
				this.getPageData()
			},
			getPageData(callback){
				let that = this;
				
				Promise.all([that.getUser(),that.getQueryUserInfo()]).then(res => {
					
					
					// 执行回调函数
					callback && callback()
				})
			},
			// 获取用户信息
			getUser(){
				userApi.getUserInfo().then(res => {
					if(res.code === 200){
						storage.set("userInfo",res.data)
						this.userInfo = storage.get('userInfo')
					}
				})
			},
			// 弹出完善信息
			getQueryUserInfo(){
				userApi.queryUserInfo().then(res => {
					if(res.code === 200){
						if(!res.data){
							this.modalInfo.isPopupDialog = true
							this.modalInfo.tipTitle = '尚未完善个人信息'
							this.modalInfo.tipContent = '您需及时完善个人信息进行认证'
							this.modalInfo.imgSrc = this.tipImg
							this.modalInfo.btnTitle = '前往完善'
						}
					}
				})
			},
			// 关闭弹窗或前往信息完善页面
			onModalResult(e){
				if(e.isCancel == true){
					this.modalInfo.isPopupDialog = false
				}else {
					this.modalInfo.isPopupDialog = false
					router.push({
					  path: ''
					})
				}
			},
			
			
			
			goLogin(){
				uni.navigateTo({
					url: '../login/login'
				})
			},
			jump(){
				uni.navigateTo({
					url: './userInfo'
				})
			},
			async jumpInfo(e) {
			  let path = e.currentTarget.dataset.path
			  if (this.tabbarPath.join(',').indexOf(path) != -1) {
			    router.switchTab({
			      path: path
			    })
			  } else {
			    if (hasLogin()) {
			      router.push({
			        path: path
			      })
			    } else {
			      uni.redirectTo({
			        url: `/pages/login/login?path=${encodeURIComponent('/pages/mine/mine')}`,
			      })
			    }
			  }
			},
		}
	}
</script>

<style scoped lang="scss">
	.layout{
		background: #fff;
	}
	.header {
		width: 100%;
		padding: 60rpx 0 0rpx;
		background-image: linear-gradient(217deg,rgba(247,232,223,.8),rgba(255,0,0,0) 53.71%),linear-gradient(127deg,rgba(250,228,217,.8),rgba(0,255,0,0) 42.71%),linear-gradient(336deg,hsla(0,0%,100%,.8),rgba(0,0,255,0) 30.71%);
		overflow: hidden;
		&-avater {
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.u-avater{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				&-text{
					margin-left: 20rpx;
					.nickname{
						color: #333;
						font-family: Source Han Sans CN;
						font-size: 28rpx;
						font-style: normal;
						font-weight: 500;
					}
					image{
						width: 152rpx;
						height: 40rpx;
					}
				}
			}
			.more{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: #666;
				font-family: Source Han Sans CN;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 500;
			}
		}
		&-adv{
			position: relative;
			width: 90%;
			height: 310rpx;
			margin: 0 auto;
			text-align: center;
			image{
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 622rpx;
				height: 270rpx;
				margin: 20rpx auto 0;
			}
			text{
				position: absolute;
				left: 50%;
				bottom: 50rpx;
				transform: translateX(-50%);
				width: 188rpx;
				height: 45rpx;
				line-height: 45rpx;
				background-image: linear-gradient(152deg, #F6CD8F -56.45%, #F1A252 78.71%);
				color: #FFF;
				font-family: Source Han Sans CN;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 500;
				border-radius: 23rpx;
			}
		}
	}
	.mine-info{
		position: relative;
		margin: -90rpx auto 0;
		padding: 20rpx 30rpx;
		background-image: url();
		background-size: cover;
		z-index: 99;
		&-money{
			display: flex;
			justify-content: space-between;
			background: url(../../static/images/middlebg.png) no-repeat left center;
			background-size: 100% 152rpx;
			margin-top: 80rpx;
			.mine-money {
				width: 49%;
				padding: 20rpx;
				text-align: center;
				view{
					color: #666;
					font-family: Source Han Sans CN;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
				}
				.money{
					color: #614132;
					font-family: Source Han Sans CN;
					font-size: 36rpx;
					font-style: normal;
					font-weight: 700;
					padding-top: 15rpx;
				}
			}
			.lineL {
				height: 50rpx;
				margin-top: 50rpx;
				border-left: 2rpx solid  #AF958C;;
			}
		}
		.mine-nav{
			margin-top: 30rpx;
		}
	}
	
	.footer{
		margin-top: 30rpx;
		background: #fff;
		padding: 0rpx 30rpx;
		.logout{
			display: flex;
			justify-content: center;
			align-items: center;
			color: #333;
			font-family: Source Han Sans CN;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			padding: 30rpx 0;
		}
	}
</style>